<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Home</title>

    <!-- Main Styles -->
    <link rel="stylesheet" href="../static/styles/style.min.css">

    <!-- Material Design Icon -->
    <link rel="stylesheet" href="../static/fonts/material-design/css/materialdesignicons.css">

    <!-- mCustomScrollbar -->
    <link rel="stylesheet" href="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

    <!-- Waves Effect -->
    <link rel="stylesheet" href="../static/plugin/waves/waves.min.css">

    <!-- Sweet Alert -->
    <link rel="stylesheet" href="../static/plugin/sweet-alert/sweetalert.css">

    <!-- Morris Chart -->
    <link rel="stylesheet" href="../static/plugin/chart/morris/morris.css">

    <!-- FullCalendar -->
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../static/plugin/fullcalendar/fullcalendar.print.css" media='print'>

    <!-- Dark Themes -->
<!--    <link rel="stylesheet" href="../static/styles/style-black.min.css">-->
</head>

<body>
<div th:replace="menu"></div>
<div th:replace="nav"></div>

<div id="wrapper">
    <div class="main-content">
        <div class="row small-spacing">
            <div class="col-xs-12">
                <div class="box-content">
                    <h4 class="box-title">Default</h4>
                    <table id="example" class="table table-striped table-bordered display" style="width:100%">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>角色名</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                        <tbody id="tbody1">
                        </tbody>
                    </table>
                </div>
                <!-- /.box-content -->
            </div>
        </div>
    </div>
</div><!--/#wrapper -->
<script src="../static/scripts/html5shiv.min.js"></script>
<script src="../static/scripts/respond.min.js"></script>
<![endif]-->
<!--
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../static/scripts/jquery.min.js"></script>
<script src="../static/scripts/modernizr.min.js"></script>
<script src="../static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../static/plugin/nprogress/nprogress.js"></script>
<script src="../static/plugin/sweet-alert/sweetalert.min.js"></script>
<script src="../static/plugin/waves/waves.min.js"></script>

<!-- Responsive Table -->
<script src="../static/plugin/RWD-table-pattern/js/rwd-table.min.js"></script>
<script src="../static/scripts/rwd.demo.min.js"></script>

<script src="../static/scripts/main.min.js"></script>
<script type="text/javascript">
    $(function () {
        show();
    })

    function show() {
        $.ajax({
            url: "/permission/RoleIndex",
            type: "post",
            success: function (obj) {
                if (obj.result) {
                    let message = "";
                    $.each(obj.roleList,
                        function (index, role) {
                            message += "<tr>";
                            message += "<td>" + (index + 1) + "</td>";
                            message += "<td>" + role.rname + "</td>";
                            message += "<td>";
                            message += "<button type='button' class='btn btn-info  btn-rounded btn-xs waves-effect waves-light' onclick='assignPermission("+role.rid+")'><i class='glyphicon glyphicon-ok'>修改权限</i></button>";
                            message += "</td>";
                            message += "</tr>";
                        });
                    $("#tbody1").html(message);
                }

            }

        });
    }
    function assignPermission(rid) {
        location.href = "/permission/assignPermission?rid=" + rid;
    }

</script>
</body>
</html>